<template>
    <div class="xtx-cart-page">
        <div class="container">
            <!-- 面包屑 -->
            <el-breadcrumb separator-class="el-icon-arrow-right" style="padding:25px 10px; ">
                <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
                <el-breadcrumb-item>购物车</el-breadcrumb-item>
            </el-breadcrumb>

            <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"
                      ref="multipleTable">
                <el-table-column
                        label="选择状态"
                        width="120"
                        align="center">
                    <el-checkbox slot-scope="{row}" :checked="row.selected"
                                 @change="handleSelectionChange($event,row.skuId)"/>
                </el-table-column>
                <el-table-column
                        prop="date"
                        label="商品信息"
                        align="center">
                    <div class="goods" slot-scope="{row}">
                        <RouterLink to="/">
                            <img :src="row.picture" alt="">
                        </RouterLink>
                        <div>
                            <p class="name ellipsis">{{row.name}}</p>
                            <CartSku @change="$event=>updateCartSku(row.skuId, $event)" :skuId="row.skuId"
                                     :attrsText="row.attrsText"/>
                        </div>
                    </div>
                </el-table-column>
                <el-table-column
                        prop="nowPrice"
                        label="单价"
                        width="220"
                        align="center">
                </el-table-column>
                <el-table-column
                        label="数量"
                        width="180"
                        align="center">
                    <el-input-number slot-scope="{row}" v-model="row.count" size="mini" :min="1"
                                     @change="countChange($event,row)"/>
                </el-table-column>
                <el-table-column
                        label="小计"
                        width="180"
                        align="center">
                    <div slot-scope="{row}" style="color: #CF4444">¥{{row.count*row.nowPrice}}</div>
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="140"
                        align="center">
                    <div slot-scope="{row}">
                        <p><a href="javascript:;">移入收藏夹</a></p>
                        <p><a class="green" href="javascript:;" @click="deleteCart(row)">删除</a></p>
                        <p><a href="javascript:;">找相似</a></p>
                    </div>
                </el-table-column>
            </el-table>

            <h3 class="tit" v-if="invalidList.length">失效商品</h3>
            <el-table :data="invalidList" style="width: 100%" v-if="invalidList.length">
                <el-table-column
                        prop="date"
                        label="商品信息"
                        align="center">
                    <div class="goods" slot-scope="{row}">
                        <RouterLink to="/">
                            <img :src="row.picture" alt="">
                        </RouterLink>
                        <div>
                            <p class="name ellipsis">{{row.name}}</p>
                            <p class="attr">{{row.attrsText}}</p>
                        </div>
                    </div>
                </el-table-column>
                <el-table-column
                        prop="nowPrice"
                        label="单价"
                        width="220"
                        align="center">
                </el-table-column>
                <el-table-column
                        label="数量"
                        prop="count"
                        width="180"
                        align="center"/>

                <el-table-column
                        label="小计"
                        width="180"
                        align="center">
                    <div slot-scope="{row}" style="color: #CF4444">¥{{row.count*row.nowPrice}}</div>
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="140"
                        align="center">
                    <div slot-scope="{row}">
                        <p><a class="green" href="javascript:;">删除</a></p>
                        <p><a href="javascript:;">找相似</a></p>
                    </div>
                </el-table-column>
            </el-table>

            <!-- 操作栏 -->
            <div class="action">
                <div class="batch">
                    <a href="javascript:;" @click="batchDeleteCart()">删除商品</a>
                    <a href="javascript:;">移入收藏夹</a>
                    <a href="javascript:;">清空失效商品</a>
                </div>
                <div class="total">
                    共 {{$store.getters.validTotal}} 件商品，已选择 {{$store.getters.selectedTotal}} 件，商品合计：
                    <span class="red">¥{{$store.getters.selectedAmount}}</span>
                    <el-button type="primary" @click="goCheckout">下单结算</el-button>
                </div>
            </div>
            <!-- 猜你喜欢 -->
            <GoodsRelevant/>

        </div>
    </div>
</template>

<script>
    import GoodsRelevant from "@/views/goods/components/goods-relevant";
    import CartSku from "@/views/cart/components/cart-sku";

    export default {
        name: "XtxCartPage",
        components: {CartSku, GoodsRelevant},
        data() {
            return {
                invalidList: []
            }
        },
        created() {
            this.invalidList = this.$store.getters.invalidList
        },
        methods: {

            handleSelectionChange(selected, skuId) {
                this.$store.dispatch('cart/updateCart', {skuId, selected})
            },
            //删除
            deleteCart(goods) {
                this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$store.dispatch('cart/deleteCart', goods.skuId)
                })
            },
            //批量删除选中商品
            batchDeleteCart() {
                this.$confirm('您确定从购物车删除选中的商品吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$store.dispatch('cart/batchDeleteCart')
                })
            },
            //改变数量
            countChange(value, goods) {
                this.$store.dispatch('cart/updateCart', {skuId: goods.skuId, count: value})
            },
            //修改规格
            updateCartSku(skuId, aa) {

            },
            goCheckout() {
                if (this.$store.getters.selectedTotal === 0) {
                    this.$message.info('至少选中一件商品才能结算')
                    return
                }
                if (this.$store.getters.token) {
                    this.$router.push('/member/checkout')
                } else {
                    this.$confirm('下单结算需要登录，您是否去登录？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$router.push('/member/checkout')
                    }).catch(() => {
                    });

                }
            }
        },
        computed: {
            //有效商品
            tableData() {
                return this.$store.getters.validList
            }
        }


    }
</script>

<style scoped lang="less">
    .xtx-cart-page {
        background: #f5f5f5;
    }

    .goods {
        display: flex;
        align-items: center;

        img {
            width: 80px;
            height: 80px;
        }

        > div {
            padding-left: 10px;

            .attr {
                font-size: 14px;
                color: #999;
            }
        }
    }

    .green {
        color: @xtxColor
    }

    .tit {
        color: #666;
        font-size: 16px;
        font-weight: normal;
        line-height: 50px;
        background: #fff;
        margin-top: 30px;
        padding-left: 20px;
        border-bottom: 1px solid #EBEEF5;
    }

    .action {
        display: flex;
        background: #fff;
        margin-top: 20px;
        height: 80px;
        align-items: center;
        font-size: 16px;
        justify-content: space-between;
        padding: 0 30px;

        .xtx-checkbox {
            color: #999;
        }

        .batch {
            a {
                margin-left: 20px;
            }
        }

        .red {
            font-size: 18px;
            margin-right: 20px;
            font-weight: bold;
            color: @priceColor;
        }
    }


</style>